<template>
	<view class="dp-shortvideo" :style="{
	color:params.color,
	backgroundColor:params.bgcolor,
	margin:(params.margin_y*2.2)+'rpx '+(params.margin_x*2.2)+'rpx',
	padding:(params.padding_y*2.2)+'rpx '+(params.padding_x*2.2)+'rpx'
}">
		<view class="dp-shortvideo-content">
			<WaterfallVue :config='params' :wfList='data' @itemTap="itemTap" v-if="data.length"></WaterfallVue>
			<!-- <view v-for="(item, index) in data" :key="index" class="item">
				<image class="ff" mode="widthFix" :src="item.coverimg" @tap="goto"
					:data-url="'/activity/shortvideo/detail?id=' + item.videoId +'&cid='+params.category"></image>
				<view class="action">
					<image v-if="params.showlogo==1" class="touxiang" :src="item.logo" />
					<view class="play" v-if="params.showviewnum==1">
						<image class="tubiao" src="/static/img/shortvideo_playnum.png" />
						{{item.view_num}}
					</view>
					<view class="like" v-if="params.showzannum==1">
						<image class="tubiao" src="/static/img/shortvideo_likenum.png" />{{item.zan_num}}
					</view>
				</view> -->
			<!-- 		<view class="f2">
					<view class="t1" v-if="params.showlogo==1">
						<image class="touxiang" :src="item.logo" />
					</view>
					<view class="t2" v-if="params.showviewnum==1">
						<image class="tubiao" src="/static/img/shortvideo_playnum.png" />{{item.view_num}}
					</view>
					<view class="t3" v-if="params.showzannum==1">
						<image class="tubiao" src="/static/img/shortvideo_likenum.png" />{{item.zan_num}}
					</view>
				</view> -->
		</view>
	</view>
	</view>
</template>
<script>
	import WaterfallVue from './waterfall/waterfall.vue';
	export default {
		data() {
			return {
				pre_url: getApp().globalData.pre_url,
				updateNum: 10
			}
		},
		components: {
			WaterfallVue
		},
		props: {
			params: {},
			data: {}
		},
		created() {
			console.log(this.data);
			this.updateNum = this.data?.length
			console.log(this.params);
		}
	}
</script>
<style lang="less">
	.dp-shortvideo {
		height: auto;
		position: relative;
	}



	// .dp-shortvideo-content .item {
	// 	width: 49%;
	// 	height: 500rpx;
	// 	background: #fff;
	// 	overflow: hidden;
	// 	border-radius: 8rpx;
	// 	margin-bottom: 20rpx;
	// 	position: relative
	// }

	.dp-shortvideo-content .item .ff {
		width: 100%;
		height: 100%;
		display: block;
	}

	.dp-shortvideo-content .item .f2 {
		position: absolute;
		bottom: 20rpx;
		left: 20rpx;
		display: flex;
		align-items: center;
		color: #fff;
		font-size: 22rpx
	}

	.dp-shortvideo-content .item .f2 .t1 {
		display: flex;
		align-items: center;
		text-shadow: 0px 6px 12px rgba(0, 0, 0, 0.12);
	}

	.dp-shortvideo-content .item .f2 .t2 {
		display: flex;
		align-items: center;
		margin-left: 30rpx;
		text-shadow: 0px 6px 12px rgba(0, 0, 0, 0.12);
	}

	.dp-shortvideo-content .item .f2 .t3 {
		display: flex;
		align-items: center;
		margin-left: 30rpx;
		text-shadow: 0px 6px 12px rgba(0, 0, 0, 0.12);
	}

	.dp-shortvideo-content .item .f2 .tubiao {
		display: block;
		height: 28rpx;
		width: 28rpx;
		margin-right: 10rpx
	}

	.dp-shortvideo-content .item .f2 .touxiang {
		display: block;
		width: 40rpx;
		height: 40rpx;
		border-radius: 50%;
	}

	.dp-shortvideo-content {
		position: relative;
		display: grid;
		grid-template-columns: repeat(2, 1fr);
		gap: 12rpx;

		.item {
			box-sizing: border-box;
			border-radius: 15rpx;
			overflow: hidden;
			background-color: #fff;
			break-inside: avoid;
			/*避免在元素内部插入分页符*/
			box-sizing: border-box;
			margin-bottom: 20rpx;
			box-shadow: 0px 0px 28rpx 1rpx rgba(78, 101, 153, 0.14);

			>image {
				width: 100%;
			}
		}

		.action {
			display: flex;
			gap: 10rpx;


		}
	}
</style>